import { Drawer } from 'antd';
import { useState, useEffect } from 'react';

const defaultStyle = {
  top: '64px',
  borderTop: '1px solid #f0f0f0'
}

//公共抽屉
const CommonDrawer = ({ title="13123123", open, zIndex, children, style = {}, ...reset }) => {

  const [index, setIndex] = useState();

  useEffect(() => {
    if (index || index == 0) {
      return;
    }
    const arr = document.getElementsByClassName('views-layout');
    for (let i in arr) {
      if (arr[i].style?.cssText.includes('display: block;')) {
        setIndex(i);
        break;
      }
    }
  }, [])

  return (
    <Drawer
      title={title}
      placement="right"
      open={open}
      zIndex={800}
      getContainer={() => document.getElementsByClassName('views-layout')[index] || false}
      {...reset}
      maskClosable={false}
      style={{ ...defaultStyle, ...style }}
    >
      {children}
    </Drawer>
  );
};
export default CommonDrawer;